<template>
  <div v-loading="formLoading">
    <div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">失信被执行条数：</div>
          <div
            class="block-right"
            v-html-no="{ action: basicInfo.enterpriseDishonestSum, unit: '条' }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">被执行条数：</div>
          <div
            class="block-right"
            v-html-no="{ action: basicInfo.executedPersonSum, unit: '条' }"
          />
        </div>
      </div>
      <div class="fx">
        <div class="block ">
          <div class="block-left">法院公告条数：</div>
          <div
            class="block-right"
            v-html-no="{ action: basicInfo.courtNoticeSum, unit: '条' }"
          ></div>
        </div>
        <div class="block ">
          <div class="block-left">判决文书条数：</div>
          <div
            class="block-right"
            v-html-no="{ action: basicInfo.enterpriseCaseSum, unit: '条' }"
          />
        </div>
      </div>
    </div>

    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        历史被执行人
      </div>
      <div class="canpanyer-box" style="margin-top: 20px">
        <el-table :data="tableData1" size="mini" border>
          <el-table-column align="center" prop="number" label="案号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectAmount"
            label="执行标的(元)"
          >
          </el-table-column>
          <el-table-column align="center" prop="executeGov" label="执行法院">
          </el-table-column>
          <el-table-column align="center" prop="caseDate" label="立案日期">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        历史失信被执行人
      </div>
      <div class="canpanyer-box" style="margin-top: 20px">
        <el-table :data="tableData2" border size="mini">
          <el-table-column align="center" prop="number" label="案号">
          </el-table-column>
          <el-table-column align="center" prop="remark" label="失信行为">
          </el-table-column>
          <el-table-column align="center" prop="caseDate" label="履行情况">
          </el-table-column>
          <el-table-column align="center" prop="caseDate" label="立案日期">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        法院公告
      </div>
      <div class="canpanyer-box" style="margin-top: 20px">
        <el-table :data="tableData3" border size="mini">
          <el-table-column align="center" prop="causeOfAction" label="案由">
          </el-table-column>
          <el-table-column align="center" prop="caseIdentity" label="案件身份">
          </el-table-column>
          <el-table-column
            align="center"
            prop="announcementType"
            label="公告类型"
          >
          </el-table-column>
          <el-table-column align="center" prop="publishDate" label="案件日期">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        判决文书
      </div>
      <div class="canpanyer-box" style="margin-top: 20px">
        <el-table :data="enterpriseCaseList" border size="mini">
          <el-table-column align="center" prop="name" label="文书标题">
          </el-table-column>
          <el-table-column align="center" label="案件身份">
            <template slot-scope="scope">
              <span>{{ scope.row.roleType }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="result" label="裁决结果">
          </el-table-column>
          <el-table-column align="center" prop="judgeDate" label="案件日期">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getBusinessCirclesJudicial } from "@/api/report";
export default {
  name: "gssfInfo",
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    typeFlter(type) {
      const objMap = {
        ms: "民事",
        xs: "刑事",
        xz: "行政",
        pc: "赔偿",
        zx: "执行",
        gx: "管辖案件",
        gsx: "国际司法协助案件",
        qsx: "区际司法协助案件",
        other: "其他"
      };
      return objMap[type];
    }
  },
  data() {
    return {
      basicInfo: {},
      enterpriseCaseList: [],
      formLoading: false,
      tableData1: [], //历史被执行人
      tableData2: [], //历史失信被执行人
      tableData3: [] // 历史法院公告
    };
  },
  methods: {
    getBusinessCirclesJudicial() {
      this.formLoading = true;
      let params = {
        creditCode: this.detailInfo.creditCode
      };
      getBusinessCirclesJudicial(params)
        .then(res => {
          this.basicInfo = res.data;
          this.formLoading = false;
          this.enterpriseCaseList = res.data.enterpriseCaseList;
          this.tableData1 = res.data.enterpriseExecutedPersonList;
          this.tableData2 = res.data.enterpriseDishonestList;
          this.tableData3 = res.data.enterpriseCourtNoticeList;
        })
        .finally(() => {
          this.formLoading = false;
        });
    }
  },
  created() {
    this.getBusinessCirclesJudicial();
  }
};
</script>

<style scoped lang="scss">
.f5bg {
  background: #f5f5f5;
}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .block {
    width: 48%;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 18px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      font-size: 14px;
      width: 50%;
      white-space: wrap;
      color: #999;
    }
    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      font-size: 14px;
      color: #222;
      width: 50%;
    }
  }
}
.title-msg {
  font-size: 14px;
  font-weight: bold;
  color: #222222;
  float: left;
  margin-bottom: 20px;
}
</style>
